<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="sys" uri="/menutaglib"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>${sessionScope.web_name}</title>
		<meta content="width=device-width, initial-scale=1.0" name="viewport" />
		<link rel="stylesheet" id='style_color' href="<%=request.getContextPath()%>/resources/assets/plugins/system/css/${sessionScope.web_style}.css" type="text/css"/>
		<script type="text/javascript" src="<%=request.getContextPath()%>/resources/assets/common/js/constants.js"></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/resources/assets/system/js/common/fscapp_sys.js"></script>
	    <script type="text/javascript" src="<%=request.getContextPath()%>/resources/assets/plugins/jqPaginator.js"></script>
	    <script type="text/javascript" src="<%=request.getContextPath()%>/resources/assets/plugins/mustache.js"></script>
	    <link href="<%=request.getContextPath()%>/resources/assets/common/css/bigImg.css"  rel="stylesheet" type="text/css"/>
	    <link href="<%=request.getContextPath()%>/resources/assets/plugins/system/css/jquery.fancybox.css" rel="stylesheet" />
	    <link href="<%=request.getContextPath()%>/resources/assets/plugins/bootstrap-fileinput/bootstrap-fileinput.css"  rel="stylesheet" type="text/css"/>
	     <link href="<%=request.getContextPath()%>/resources/assets/plugins/bootstrap-fileinput/bootstrap-fileinput.css"  rel="stylesheet" type="text/css"/>
	    <link href="<%=request.getContextPath()%>/resources/assets/plugins/system/css/search.css" rel="stylesheet" type="text/css"/>
	    <script type="text/javascript" src="<%=request.getContextPath()%>/resources/assets/plugins/bootstrap-fileinput/bootstrap-fileinput.js"></script>
	    <script type="text/javascript" src="<%=request.getContextPath()%>/resources/assets/plugins/system/js/jquery.fancybox.pack.js"></script>
	  
	    <script type="text/javascript" src="<%=request.getContextPath()%>/resources/assets/plugins/system/js/search.js"></script>
	    <style type="text/css">
		    .customBootstrap .pagination>li>a{margin-right:5px;border-radius:2px;background:#fff;color:#333;border-color:#ccc;padding:6px 15px}
		    .customBootstrap .pagination>li>a:hover,
		    .customBootstrap .pagination>li>a:focus{color:#fff;background:#337AB7;border-color:#337AB7}
		    .customBootstrap .pagination>.active>a,
		    .customBootstrap .pagination>.active>a:hover,
		    .customBootstrap .pagination>.active>a:focus{color:#fff;background:#337AB7;border-color:#337AB7}
		    .customBootstrap .pagination .arrow2{margin:3px 8px 5px 0}
		    .customBootstrap .pagination a:hover .arrow2{border-right-color:#fff}
		    .customBootstrap .pagination .arrow3{margin:3px 0 5px 8px}
		    .customBootstrap .pagination a:hover .arrow3{border-left-color:#fff}
	    </style>
	</head>
	
    <!-- BEGIN BODY -->
	<body class="page-header-fixed">
		<!-- BEGIN HEADER -->
		<jsp:include page="../common/systemUserSelfHeader.jsp"></jsp:include>
		<!-- END HEADER -->	
		<!-- BEGIN CONTAINER -->   
		<div class="page-container row-fluid" >
			<!-- BEGIN HORIZONTAL MENU PAGE SIDEBAR1 -->
			<div class="page-sidebar nav-collapse collapse">
				<!-- BEGIN SIDEBAR MENU -->
				<ul class="page-sidebar-menu">
					<li>
						<!-- BEGIN SIDEBAR TOGGLER BUTTON -->
						<div class="sidebar-toggler hidden-phone"></div> <!-- BEGIN SIDEBAR TOGGLER BUTTON -->
					</li>
					<sys:sysNav ctgLevelOne="sysOperate" ctgLevelTwo="sysResourceMgr"/>
				</ul>
				<!-- END SIDEBAR MENU -->
			</div>
			<!-- END BEGIN HORIZONTAL MENU PAGE SIDEBAR -->
			<div class="container-fluid">
				<div class="row-fluid">
				</div>
			</div>
			
			<div class="page-content">
				<!-- BEGIN PAGE CONTAINER-->
				<div class="container-fluid">
					<!-- BEGIN PAGE HEADER-->
					<div class="row-fluid">
						<div class="span12">
							<!-- BEGIN STYLE CUSTOMIZER -->
							<jsp:include page="../common/sysStyle.jsp"></jsp:include>
							<!-- END BEGIN STYLE CUSTOMIZER --> 
							<!-- BEGIN PAGE TITLE & BREADCRUMB-->
							<h3 class="page-title">
								图片资源管理 <small>查询系统的图片资源</small>
							</h3>
							<ul class="breadcrumb">
								<li>
									<i class="icon-home"></i>
									<a href="${sessionScope.web_home}">首页</a>
									<i class="icon-angle-right"></i>
								</li>
								<li>
									<a href="#">运营</a>
									<i class="icon-angle-right"></i>
								</li>
								<li><a href="#">图片资源管理</a></li>
							</ul>
							<!-- END PAGE TITLE & BREADCRUMB-->
						</div>
					</div>
					<!-- END PAGE HEADER-->
					<div class="row-fluid">
						<div class="span12">
							<!-- BEGIN SAMPLE TABLE PORTLET-->
							<div class="portlet box yellow">
								<div class="portlet-title">
									<div class="caption"><i class="icon-picture"></i>图片资源</div>
									<div class="tools">
										<a href="javascript:;" class="collapse"></a>
										<!-- 
										<a href="javascript:;" class="reload"></a>
										<a href="javascript:;" class="remove"></a>
										<a href="#portlet-config" data-toggle="modal" class="config"></a>
										-->
									</div>
									<div class="actions">
										<button type='button' class='btn black btn-xs fa fa-line-chart' id='uploadImg'>上传图片</button>
									</div>
								</div>
								<div class="portlet-body">
			                    	<div class="row-fluid search-images" id="imgPages">
			                        	<script type="text/x-mustache" id="template">
										<ul class="thumbnails">
										{{#aaData}}
		                                    <li style="width: 22%;">
												<div class="row-fluid">
		                                        <a class="fancybox-button" data-rel="fancybox-button" title="查看图片" href="{{rsPath}}">
													<img src="{{rsPath}}" alt="">
												</a>
												</div>
												<div class="row-fluid">
												<a class="icon-remove" href="javascript:deleteRs({{rsId}});">
												</a>
												</div>
		                                     </li>
										{{/aaData}}
										</ul>
		                                </script>
									</div>
									<div class="row-fluid">
										<div class="row-fluid" style="text-align: center">
											<div class="pagination">
												<ul id="pagination">
												</ul>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- END SAMPLE TABLE PORTLET-->
						</div>
					</div>
					<div class="row-fluid">
						<div id="imgInfoDiv" class="modal fade" tabindex="-1">
						    <div class="modal-dialog">
						        <div class="modal-content">
						            <div class="modal-header bg-primary">
						                <h4 class="modal-title">
						                    <i class="fa fa-upload"></i>
						                    <span id="lblAddTitle" style="font-weight:bold">上传图片</span>
						                </h4>
						            </div>
						            <div class="modal-body">
						                <form action="#" id="imgForm" class="form-horizontal form-bordered" method="POST" enctype="multipart/form-data">
											<div class="fileinput fileinput-new" data-provides="fileinput" style="margin-left:6%">
											  	<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 500px; height:275px;"> </div>
										            <div>
													    <span class="btn red btn-outline btn-file">
													        <span class="fileinput-new"> 上传图片 </span>
											                <span class="fileinput-exists"> 更换图片 </span>
											                <input type="file"  id="houseMaps"  name="file" >
											            </span>
										                <a href="javascript:;" class="btn red fileinput-exists" data-dismiss="fileinput"> 删除图片 </a>
										            </div>  
										    </div>
										</form>
						            </div>
						            <div class="modal-footer bg-info">
						                 <button type="button" id="imgSubmitBtn" class="btn blue btn-outline" >确定</button>
						                 <button type="button" class="btn dark btn-outline" data-dismiss="modal">关闭</button>
						            </div> 
						        </div>
						    </div>
					  </div>
					</div>
					<!-- END PAGE CONTENT-->
				</div>
			</div>
		</div>
        <!-- BEGIN FOOTER -->
        <jsp:include page="../common/sysFooter.jsp"></jsp:include>
        <!-- END FOOTER -->
        <script>
			jQuery(document).ready(function() {    
			   App.init();
			   TableAdvanced.init();
			   UIModals.init();
			   Search.init();
			});
		</script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/resources/assets/plugins/jquery.form.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/resources/assets/system/js/operate/resourcesMgr.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/resources/assets/common/js/bigImg.js"></script>
    </body>
</html>